<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Exodus - Vintage HTML Template</title>
        <meta name="description" content="lancio, business, launch, app, product, template, design, modern, elegant" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="keywords"  content="lancio, food, launch, app, product, template, design, modern, elegant" />
        <meta name="Resource-type" content="Document" />
        
        <!-- Upload Font "https://fonts.google.com/" -->
        <link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,600,700&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i&display=swap" rel="stylesheet">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
        <!-- Styles CSS -->
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link rel="stylesheet" type="text/css" href="css/az-styles.css" />
        <!-- Load Font Awesome Kit -->
        <script src="https://kit.fontawesome.com/747940bb1c.js"></script>
        <!-- Load Animate CSS -->
        <link rel="stylesheet" type="text/css" href="css/animate.css">
        <!-- Load AOS CSS -->
        <link rel="stylesheet" type="text/css" href="css/aos.css">
        <!-- Slick Slider CSS -->
        <link rel="stylesheet" type="text/css" href="css/slick.css">
        <link rel="stylesheet" type="text/css" href="css/slick-theme.css">
        
    </head>
    <body class="white">
        
        <!-- Main Content Starts -->
        <header class="b-gold">
            <div class="container"> 
                <nav class="navbar navbar-expand-lg navbar-light">
                <!-- Change path logo here -->
                  <a class="navbar-brand logo" href="#"><img src="assets/img/logo.png" alt="Exodus" class="img-fluid"></a>
                   
                  <!-- Collapse button -->
                  <button class="navbar-toggler first-button" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="animated-icon"><span></span><span></span><span></span></span>
                  </button>
                  <!-- Collapsible content -->
                  <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#promo">Explore</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="about-page.html">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="promo-page.html">Promotions</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="blog-page.html">Blog</a>
                        </li>
                        <li class="nav-item">
                        <a class="nav-link " href="contact-page.html"><i class="far fa-envelope"></i></a>
                        </li>
                    </ul>
                  </div>
                </nav>
             </div>
        </header>
        
        <!-- Section -->
        <div id="home" class="white"> 
            <div class="content center">
                <!-- SLIDER-->
                <!-- Carousel Container -->
                <div class="slider-container">
                    <div id="slide-item" class="carousel slide" data-ride="carousel">
                        <div class="carousel-inner">
                            <!-- Slider Navigation -->
                            <ol class="carousel-indicators">
                                <li data-target="#slide-item" data-slide-to="0" class="active white"></li>
                                <li data-target="#slide-item" data-slide-to="1" class="white"></li>
                                <li data-target="#slide-item" data-slide-to="2" class="white" ></li>
                            </ol>

                            <!-- Slide -->
                            <div class="carousel-item active">
                               <div class="img-container slide five">  
                                    <div class="content-box">
                                        <div class="content-data">
                                            <h5 class="t-white">Breath-taking views</h5>
                                            <span class="line gold"></span>
                                            <div class="display t-white" data-aos="fade-down" data-aos-anchor-placement="center-bottom">Experience <span class="ft-word">epic</span> beauty</div>
                                            <a href="promo-page.html" data-aos="fade-up" data-aos-anchor-placement="center-bottom" class="primary-btn no-bg large border-2 b-white white t-white">Explore</a>
                                        </div>
                                    </div>
                                   <div class="gradient-overlay op-5"></div>
                                </div>
                            </div>
                            
                            <!-- Slide -->
                            <div class="carousel-item">
                               <div class="img-container slide two">  
                                    <div class="content-box">
                                        <div class="content-data">
                                            <h5 class="t-white">magical desert</h5>
                                            <span class="line gold"></span>
                                            <div class="display t-white" data-aos="fade-down" data-aos-anchor-placement="center-bottom">Deep <span class="ft-word">inside</span> the Sahara</div>
                                            <a href="#promo" data-aos="fade-up" data-aos-anchor-placement="center-bottom" class="primary-btn large border-2 b-brick dark-burgundy t-white">View 30% off Promotion</a>
                                        </div>
                                    </div>
                                   <div class="gradient-overlay op-5"></div>
                                </div>
                            </div>
                            
                            <!-- Slide -->
                            <div class="carousel-item">
                               <div class="img-container slide three">  
                                    <div class="content-box">
                                        <div class="content-data">
                                            <h5 class="t-white">misty mountains</h5>
                                            <span class="line white"></span>
                                            <div class="display t-white" data-aos="fade-down" data-aos-anchor-placement="center-bottom">Amazing <span class="ft-word">Scotland</span></div>
                                            <a href="promo-detail.html" data-aos="fade-up" data-aos-anchor-placement="center-bottom" class="primary-btn light-blue large t-dark-clay">discover now</a>
                                        </div>
                                    </div>
                                   <div class="gradient-overlay op-5"></div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div><!-- Section Ends -->
        
        <!-- Section -->
        <!-- Promo Slider -->
        <div id="promo" class="section white"> 
            <div class="container"> 
                <div class="content center">
                    
                    <h5 class="t-black">AROUND THE WORLD</h5>
                    <span class="line gold"></span>
                    <h2 class="t-black" >It's time to <span class="t-gold">travel</span></h2>
                    <h6>Take a look at the most exclusive & most visited locations in the world - hand-picked just for you.<br> Start traveling the world today!</h6>
                
                    <div class="mt-50">  
                        <section class="promo-slider slider">
                            
                            <!-- Promo Item -->
                            <div class="promo-item">
                                <a href="promo-detail.html" class="link-item">
                                    <div class="hover-link">
                                        <span class="primary-btn large black t-gold">View Promo</span>
                                    </div>
                                    <div class="promo gold">
                                        <span class="t-white">-30%</span>
                                    </div>
                                    <div class="title">
                                        <h5 class="t-gold">GREECE</h5>
                                        <span class="line"></span>
                                        <h3 class="t-white">Visit Mikonos</h3>
                                    </div>
                                </a>
                                <div class="image"><div class="hover"></div><img src="assets/img/promo/mikonos.jpg" alt="Exodus" class="img-fluid"></div>
                            </div>
                            
                            <!-- Promo Item -->
                            <div class="promo-item">
                                <a href="promo-detail.html" class="link-item">
                                    <div class="hover-link">
                                        <span class="primary-btn large black t-snow">more details</span>
                                    </div>
                                    <div class="title">
                                        <h5 class="t-gold">VENEZUELA</h5>
                                        <span class="line"></span>
                                        <h3 class="t-white">Venezuela</h3>
                                    </div>
                                </a>
                                <div class="image"><div class="hover"></div><img src="assets/img/promo/venezuela.jpg" alt="Exodus" class="img-fluid"></div>
                            </div>
                            
                            <!-- Promo Item -->
                            <div class="promo-item">
                                <a href="promo-detail.html" class="link-item">
                                    <div class="hover-link">
                                        <span class="primary-btn large black t-snow">more details</span>
                                    </div>
                                    <div class="title">
                                        <h5 class="t-gold">ITALY - ROME</h5>
                                        <span class="line"></span>
                                        <h3 class="t-white">Eternal City</h3>
                                    </div>
                                </a>
                                <div class="image"><div class="hover"></div><img src="assets/img/promo/rome.jpg" alt="Exodus" class="img-fluid"></div>
                            </div>
                            
                            <!-- Promo Item -->
                            <div class="promo-item">
                                <a href="promo-detail.html" class="link-item">
                                    <div class="hover-link">
                                        <span class="primary-btn large black t-snow">more details</span>
                                    </div>
                                    <div class="title">
                                        <h5 class="t-gold">AUSTRALIA</h5>
                                        <span class="line"></span>
                                        <h3 class="t-white">Australia</h3>
                                    </div>
                                </a>
                                <div class="image"><div class="hover"></div><img src="assets/img/promo/autralia.jpg" alt="Exodus" class="img-fluid"></div>
                            </div>
                            
                            <!-- Promo Item -->
                            <div class="promo-item">
                                <a href="promo-detail.html" class="link-item">
                                    <div class="hover-link">
                                        <span class="primary-btn large black t-snow">more details</span>
                                    </div>
                                    <div class="title">
                                        <h5 class="t-gold">SCOTLAND</h5>
                                        <span class="line"></span>
                                        <h3 class="t-white">Misty Mountains</h3>
                                    </div>
                                </a>
                                <div class="image"><div class="hover"></div><img src="assets/img/promo/scotland.jpg" alt="Exodus" class="img-fluid"></div>
                            </div>
                            
                            <!-- Promo Item -->
                            <div class="promo-item">
                                <a href="promo-detail.html" class="link-item">
                                    <div class="hover-link">
                                        <span class="primary-btn large black t-gold">View Promo</span>
                                    </div>
                                    <div class="promo gold">
                                        <span class="t-white">-15%</span>
                                    </div>
                                    <div class="title">
                                        <h5 class="t-gold">ITALY</h5>
                                        <span class="line"></span>
                                        <h3 class="t-white">Weekend in Positano</h3>
                                    </div>
                                </a>
                                <div class="image"><div class="hover"></div><img src="assets/img/promo/positano.jpg" alt="Exodus" class="img-fluid"></div>
                            </div>
                            
                            <!-- Promo Item -->
                            <div class="promo-item">
                                <a href="promo-detail.html" class="link-item">
                                    <div class="hover-link">
                                        <span class="primary-btn large black t-snow">more details</span>
                                    </div>
                                    <div class="title">
                                        <h5 class="t-gold">USA - NEW YORK</h5>
                                        <span class="line"></span>
                                        <h3 class="t-white">New York</h3>
                                    </div>
                                </a>
                                <div class="image"><div class="hover"></div><img src="assets/img/promo/newyork.jpg" alt="Exodus" class="img-fluid"></div>
                            </div>
                            
                            <!-- Promo Item -->
                            <div class="promo-item">
                                <a href="promo-detail.html" class="link-item">
                                    <div class="hover-link">
                                        <span class="primary-btn large black t-snow">more details</span>
                                    </div>
                                    <div class="title">
                                        <h5 class="t-gold">MOROCCO</h5>
                                        <span class="line"></span>
                                        <h3 class="t-white">Morocco Colors</h3>
                                    </div>
                                </a>
                                <div class="image"><div class="hover"></div><img src="assets/img/promo/morocco.jpg" alt="Exodus" class="img-fluid"></div>
                            </div>
                        </section>
                        <div class="center"><a href="promo-page.html" class="mt-50 primary-btn large no-bg border-2 b-black t-black">View All promotions</a></div>
                    </div>
                </div>
            </div>
        </div><!-- Section Ends -->
        
        <!-- Section -->
        <div id="about" class="section video"> 
                <div class="container"> 
                    <div class="content center">
                        <h5 class="t-white">THE AGENCY</h5>
                        <span class="line gold"></span>
                        <h2 class="t-white">Discovering the <span class="t-gold">World</span></h2>
                        <h6 class="t-white paragraph">Passionate about travel and sharing the world's wonders on the leisure travel side. We provide corporate travelers hi-touch services to facilitate their business travel needs. Named each year as one of the <span class="t-gold">"Best Places To Work"</span> in New York.</h6>

                        <a href="about-page.html" class="mt-30 primary-btn large white t-black"><i class="fas fa-video"></i> View our showreel</a>
                    </div>
                </div>
            <!-- Video Background -->
            <div class="video-back">
                <div class="color-overlay op-7"></div>
                <video autoplay loop muted>
                    <source src="assets/video/wave.mp4" type="video/mp4">
                </video>
            </div>
            
        </div><!-- Section Ends -->
        
        <!-- Section -->
        <div class="section white"> 
            <div class="container" id="posts"> 
                <div class="content center">
                    
                    <h5 class="t-black">THE BLOG</h5>
                    <span class="line gold"></span>
                    <h2 class="t-black">Latest from the <span class="t-gold">Blog</span></h2>
                    <div class="row text-justify mt-50">
                        
                        <!-- Info Box -->
                        <div class="col-lg-4 left" >
                            <div class="post-item">
                                <img src="assets/img/ft-1.jpg" alt="exodus" class="img-fluid main">
                                <a href="blog-detail.html"><h4 class="t-black">Discovering Mikonos</h4></a>
                                <div class="info-box-detail left">
                                    <div class="post-info">By: <a class="author t-gold">Angela Manscori</a></div>
                                    <div class="post-views">
                                        <img src="assets/img/user1.jpg" alt="exodus" class="img-fluid">
                                        <img src="assets/img/user2.jpg" alt="exodus" class="img-fluid">
                                        <img src="assets/img/user3.jpg" alt="exodus" class="img-fluid">
                                        <span class="count">+110</span>
                                    </div>
                                </div>
                            </div>
                        </div><!-- End -->
                        
                        <!-- Info Box -->
                        <div class="col-lg-4 left" >
                            <div class="post-item">
                                <img src="assets/img/ft-2.jpg" alt="exodus" class="img-fluid main">
                                <a href="blog-detail.html"><h4 class="t-black">The Island of Vulcano</h4></a>
                                <div class="info-box-detail left">
                                    <div class="post-info">By: <a class="author t-gold">Nissur Al Bettur</a></div>
                                    <div class="post-views">
                                        <img src="assets/img/user1.jpg" alt="exodus" class="img-fluid">
                                        <img src="assets/img/user2.jpg" alt="exodus" class="img-fluid">
                                    </div>
                                </div>
                            </div>
                        </div><!-- End -->
                        
                        <!-- Info Box -->
                        <div class="col-lg-4 left" >
                            <div class="post-item">
                                <img src="assets/img/ft-3.jpg" alt="exodus" class="img-fluid main">
                                <a href="blog-detail.html"><h4 class="t-black">Cathedral in the Sea</h4></a>
                                <div class="info-box-detail left">
                                    <div class="post-info">By: <a class="author t-gold">Jesus A. Barrero</a></div>
                                    <div class="post-views">
                                        <img src="assets/img/user1.jpg" alt="exodus" class="img-fluid">
                                        <img src="assets/img/user2.jpg" alt="exodus" class="img-fluid">
                                        <img src="assets/img/user3.jpg" alt="exodus" class="img-fluid">
                                        <span class="count">+234</span>
                                    </div>
                                </div>
                            </div>
                        </div><!-- End -->
                        
                    </div>
                </div>
            </div>
        </div><!-- Section Ends -->
        
        <div class="container"><div class="break-line gold op-3"></div></div>
        
        <!-- Section -->
        <div id="testimonial" class="section white "> 
            <div class="container center"> 
                <h5 class="t-black">TESTIMONIALS</h5>
                <span class="line gold"></span>
                <h2 class="t-black" >Our <span class="t-gold">clients</span> say:</h2>
                
                <!-- TESTIMONIALS -->
                <div class="testimonial-container">
                    <div id="t-item" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                            <li data-target="#t-item" data-slide-to="0" class="active gold"></li>
                            <li data-target="#t-item" data-slide-to="1" class="gold"></li>
                            <li data-target="#t-item" data-slide-to="2" class="gold"></li>
                        </ol>
                        <div class="carousel-inner content">
            
                            <!-- Testimonial Item -->
                            <div class="carousel-item active"> 
                                <div class="item">  
                                    <div class="img center"><img src="assets/img/user2.jpg"  alt="Exodus" class="img-fluid"></div>
                                    <h6 class="text t-black">A must-have template. Maybe one of the best vintage templates so far in the market. Recommended 100%.</h6>
                                    <div class="name t-black">MARIA De ANDRE'</div>
                                    <div class="role t-dark-clay">Artist</div>
                                </div>
                            </div>
                            
                            <!-- Testimonial Item -->
                            <div class="carousel-item"> 
                                <div class="item">
                                    <div class="img center"><img src="assets/img/user1.jpg"  alt="Exodus" class="img-fluid"></div>
                                    <h6 class="text t-black">Extremelly flexible and easy to use. Code is clean and all files well organized. Great job guys.</h6>
                                    <div class="name t-black">JOHN E. PERRY</div>
                                    <div class="role t-dark-clay">Moravian Ltd - CEO</div>
                                </div>
                            </div>
                            
                            <!-- Testimonial Item -->
                            <div class="carousel-item"> 
                                <div class="item ">
                                    <div class="img center"><img src="assets/img/user3.jpg"  alt="Exodus" class="img-fluid"></div>
                                    <h6 class="text t-black">Fast, easy, reliable, fun, flexible, modern. Many options, colors, widgets. +++</h6>
                                    <div class="name t-black">LINDA FALANGY</div>
                                    <div class="role t-dark-clay">Graphic Designer</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- Section Ends --> 

        <!-- Section -->
        <div class="section back four"> 
            <div class="container center"> 
                <div class="banner white square">
                    <h5 class="t-gold">NEWSLETTER</h5>
                    <span class="line black"></span>
                    <h2 class="t-black" >Don't <span class="t-gold">miss</span> it!</h2>
                    <h6 class="center">Subscribe to our newsletter for special promotions & cool updates.</h6>
                    <div id="fields">
                        
                        <!-- CONTACT Form-->
                        <form id="contact-form" method="POST" action="php/contact.php">
                            <div id="note" class="messages t-dark"></div>
                            <div class="controls center newsletter">
                                
                                <!-- form-group-->
                                <div class="form-group">
                                    <div class="input-item form-group">
                                        <input id="form_email" type="email" name="email" class="form-control light-grey" placeholder="Email address*" required="required" data-error="Valid email is required.">
                                        <div class="help-block with-errors"></div>
                                    </div>
                                    <div class="help-block with-errors"></div>
                                    <input type="submit" name="submit" id="submit" class="primary-btn large square-bl square-tl black t-snow" value="Send">
                                </div>
                            </div>
                        </form><!-- END CONTACT Form-->
                    </div>
                </div>
                    <h5 class="t-black mt-100">stay connected</h5>
                    <span class="line gold "></span>
                    <div class="social-container m-20 center">
                        <a href="" class="primary-btn white icon t-gold"><i class="fab fa-facebook-square"></i></a>
                        <a href="" class="primary-btn white icon t-gold"><i class="fab fa-instagram"></i></a>
                        <a href="" class="primary-btn white icon t-gold"><i class="fab fa-linkedin"></i></a>
                    </div>
            </div>
        </div><!-- Section Ends -->
        
        <!-- Footer -->
            <footer>
                <div class="container">
                    <div class="links t-black">
                        <a>Explore</a>
                        <a>About</a>
                        <a>Promotions</a>
                        <a>Blog</a>
                        <a>Contact</a>
                    </div>
                    <div class="copyright t-grey center">2019 - All rights reserved to &copy;Exodus</div>
                </div>
            </footer>
        
        <!-- JS files upload -->
        <script src="js/jquery-3.4.1.min.js"></script> 
        <script src="js/bootstrap.min.js"></script>
        <script src="js/popper.min.js"></script>
        <script src="js/slick.min.js"></script>
        <script src="js/validator.min.js"></script>
        <script src="js/contact.js"></script> 
        <script src="js/main.js"></script>
        <script src="js/aos.js"></script>
        
    </body>
</html>